<template>
  <div class="wrapper">
    <comment-header :title="'影推'"></comment-header>
    <movie-list :title="'我评论过的电影'" :list="movieList" @choose="movieChange" class="movie-list"></movie-list>
    <comment :list="commentList" v-show="movieList.length" @delete="deleteComment"></comment>
  </div>
</template>
<script>
import MovieList from './components/List'
import Comment from './components/Comment'
import CommentHeader from 'common/header/Header'
import axios from 'axios'
import qs from 'qs'
export default {
  name: 'MyComment',
  components: {
    MovieList,
    Comment,
    CommentHeader
  },
  data () {
    return {
      movieList: [],
      id: 0,
      commentList: []
    }
  },
  methods: {
    updateUserInfo () {
      axios.post('/api/usr/usrInfo').then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      res = res.data.data
      this.$store.commit('changeNickname', {
        nickname: res.nickname
      })
      this.$store.commit('changeAvatar', {
        avatar: res.head_pic
      })
    },
    getMovieList () {
      axios.post('/api/usr/myCommentMovie').then(this.getMovieSucc)
    },
    getMovieSucc (res) {
      res = res.data
      this.movieList = res.data.movieList
      if (!this.movieList.length) return
      this.id = this.movieList[0].movie_id
      this.getCommentList()
    },
    movieChange (id) {
      this.id = id
      this.getCommentList()
    },
    getCommentList () {
      axios.post('/api/usr/myComment', qs.stringify({
        movie_id: this.id
      })).then(this.getCommentSucc)
    },
    getCommentSucc (res) {
      res = res.data
      this.commentList = res.data.commentList
    },
    deleteComment (id, time) {
      this.commentList.splice(id, 1)
      axios.post('/api/usr/deleteMyComment/' + time).then(function (response) {
      })
    }
  },
  mounted () {
    this.getMovieList()
    this.updateUserInfo()
  }
}
</script>
<style lang="stylus" scoped>
  .wrapper
    .movie-list
      margin-top: .6rem
</style>
